<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
		#d1{
			width: 100px;
			height: 100px;
			background-color: green; 
		    /*上边距  */
		    /*margin-top: 50px; */
		    
			/*左边距  */
			/* margin-left: 30px; */
			
			/*下边距  
			 margin-bottom: 20px;    */
			
			/*上下左右边距各设置为10;
		       margin: 10px */
	 		
		    /* 上下边距设置为10px 左右边距设置为20px	
			 margin: 10px;20px; 		 */
			 
			 /*元素居中  */
			/*  margin: 0 auto; */
			
			/*设置上右下左(顺时针)边距各为10,20,30,40;  顺时针*/
			/*margin: 10px 20px 30px 40px;  */
			margin-bottom: 60px;

		}
		#d2{
			width: 100px;
			height: 100px;
			background-color: red;
			margin-top: 50px;
		/* 	margin-top: 50px;  无效 */
		}
		body{
			/*去掉body自带的8个像素的外边距  */
				margin: 0; 
		}
		
		#s1{
		   margin-left: 20px;
		   margin-right: 20px;
		}
		#s2{                       /*左右相邻相加 上下取最大  */
			margin-left: 40px;
		}
</style>
</head>
<body>
	<span id="s1">span1</span>	<span id="s2">span2</span>
	<div id="d1">div1</div>
	<div id="d2">div2</div>
</body>
</html>